<template>
  <div class="map-box">
    <div class="info">
        <el-button type="primary" size="small" @click="drawFeature(1)">添加</el-button>
        <el-button type="success" size="small" @click="modifyFeature(2)">修改</el-button>
        <el-button type="info" size="small" @click="deletFeature(3)">删除</el-button>
    </div>
    <ol-map
      class="map"
      ref="map"
      zoom="6"
      :center="center"
      :isShowBaseMap="true"
      :isScaleLine="true"
    ></ol-map>
  </div>
</template>

<script>
import olMap from "../../../../components/map/ol-map";
import zDraw from "../../../../Utils/ol/zDraw"
import {getPolygonData,addPolygonFeature,deletPolygonFeature,updatePolygonFeature} from "../../../../api/polygon"
import {Circle as CircleStyle, Fill, Stroke, Style,Icon} from 'ol/style.js';
import {Select} from "ol/interaction"
import untiles from "../../../../Utils/common/untiles"
import zModify from "../../../../Utils/ol/zModify"
export default {
  data() {
    return {
      center: [113.4, 34.56],
      info: "",
      ZMap:null,
      ZDraw:null
    };
  },
  components: {
    olMap
  },
  mounted() {
    this.ZMap = this.$refs.map.map;    
    
    this.getPolygonData()
    
  },
  methods: {
    drawFeature(type){
        if(!this.ZDraw)
            this.ZDraw =  new zDraw(this.ZMap.map)
        this.ZDraw.draw({
            type:3,
            endDraw:res=>{
                addPolygonFeature({
                    name:"张三"+parseInt(Math.random()),
                    geom:res.wkt
                }).then(data=>{
                    console.log(data)
                })
            }
        })
    },
    // 获取多边形的
    getPolygonData(){
      getPolygonData().then(res=>{
        console.log("-------",res.data[0].geojson)
        if(res.data.length>0){
          this.ZMap.showGeoJson({
            url:res.data[0].geojson,
            style:new Style({
                //填充色
                fill:  new Fill({
                    color: 'red'
                }),
                // //边线颜色
                // stroke:strokeStyle ,
                // //形状
                // image: imageCircle
            })
          })
        }
      })
    },
    // 删除空间要素信息
    deletFeature(){
      let select = new Select({
          wrapX: false
      });
      this.ZMap.map.addInteraction(select);
      let features = select.getFeatures()
      select.on("select",function (e) {
        var features=e.selected;
        var feature=features[0];
        var geometry=feature.getGeometry();
        var attribute=  feature.getProperties();
        var id=attribute["id"];
        deletPolygonFeature({
          id:id
        }).then(res=>{
          if(res.success) untiles.msg("空间要素删除成功")
        })
      })
    },
    // 编辑要素
    modifyFeature(){
      let modify = new zModify(this.ZMap.map)
      modify.modify({
        endModify:res=>{
          let propers = res.feature.getProperties()
          updatePolygonFeature({
            id: propers.id,
            name:propers.name,
            geom:res.wkt
          }).then(res=>{
            if(res.success)
              untiles.msg("要素修改成功")
          })
        }
      })
    }

  }
};
</script>

<style>
.map-box {
  height: 100%;
  width: 100%;
}
.map {
  height: 100%;
  width: 100%;
}
.info {
  position: absolute;
  top: 70px;
  left: 245px;
  z-index: 100;
}
</style>